<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
    <script src="theme/ceshi.js"></script>
    <title>Document</title>
  </head>
  <body>
    <!-- 
        可以使用内置主题或者是自定义主题，

        内置主题
        在使用init创建时，第一参数是dom元素，第二个参数可以是：‘light’，‘dark’

        自定义主题
        在主题编辑器中编辑主题（需要在echarts的官网上编辑）
        编辑完成后，将这个编辑的文件下载下来，是一个js文件
        通过script的标签属性将js文件引入进项目中
        在init中使用主题
        （主题编辑器的位置在官网上的主题下载中的定制主题
     -->
    <div style="width: 600px; height: 400px"></div>
  </body>
  <script>
    // var MyEcharts = echarts.init(document.querySelector("div"), "dark");//一共有两套内置主题，dark和light
    var MyEcharts = echarts.init(document.querySelector('div'),"ceshi") //使用自定义的主题,需要在官网上下载主题
    var option = {
        xAxis: {
          type: "category",
          data: ["小明", "小花", "小华", "小菜"],
          position: "top",
        },
        yAxis: {
          type: "value",
        },
      series: [{ name: "成绩", data: [50, 80, 75, 60], type: "bar" }],
    };

    MyEcharts.setOption(option);
  </script>
</html>
